<template>
  <view class="" v-if="refundInfo">
    <view class="page" style="padding-bottom: 120rpx">
      <template>
        <view class="show-panel">
          <view class="show-col">
            <text class="show-col-l">退租日期</text>
            <view class="show-col-r">
              <text>
                {{
                  refundInfo.endTime || `-`
                }}
              </text>
            </view>
          </view>

          <view class="show-col">
            <text class="show-col-l">合同总面积 (m²)</text>
            <view class="show-col-r">
              {{refundInfo.contractArea}}
            </view>
          </view>

          <view class="show-col">
            <text class="show-col-l">账单总计 (元)</text>
            <view class="show-col-r">
              {{refundInfo.total}}
            </view>
          </view>

          <view class="show-col">
            <text class="show-col-l">租金合计(元)</text>
            <view class="show-col-r">
              {{refundInfo.rentalTotal}}
            </view>
          </view>

          <view class="show-col">
            <text class="show-col-l">物业费合计 (元)</text>
            <view class="show-col-r">
              {{refundInfo.propertyTotal}}
            </view>
          </view>

          <view class="show-col">
            <text class="show-col-l">水电气费用合计(元)</text>
            <view class="show-col-r">
              {{refundInfo.electricFee}}
            </view>
          </view>

          <view class="show-col">
            <text class="show-col-l">设施赔偿费合计(元)</text>
            <view class="show-col-r">
              {{refundInfo.facilityNoun}}
            </view>
          </view>

        </view>

        <view class="show-panel">
          <view class="show-col">
            <text class="show-col-l">保证金总计(元)</text>
            <view class="show-col-r">
              {{refundInfo.marginTotal}}
            </view>
          </view>
        </view>

        <view class="show-panel">
          <view class="show-col">
            <text class="show-col-l">备注</text>
            <view class="show-col-r">
              {{refundInfo.remark}}
            </view>
          </view>
        </view>

      </template>

      <template v-for="(item,index) in refundInfo.feApartmentCancelDetailGroupList">
        <view style="display: flex;justify-content: space-between;align-items: center">
          <view class="info-tit">
            编号：{{ item.leaseNum }}
          </view>
          <view class="r-unit">
            类型：{{ item.leaseModel }}
          </view>
        </view>

        <view class="show-panel" style="border-radius: 12rpx 12rpx 0 0;margin-bottom: 0;">
          <view class="table-col table-tit">
            <view class="table-col-c" style="width: 38%">房源编号</view>
            <view class="table-col-c" style="width: 26%">费用合计</view>
            <view class="table-col-c" style="width: 18%">保证金</view>
            <view class="table-col-c" style="width: 18%"></view>
          </view>
          <view class="table-col" v-for="(item2,index2) in item.feApartmentCancelDetailList" :key="index2"
                @click="showHouseEditFn(item2)">
            <view class="table-col-c" style="width: 38%">{{ item2.roomCode||'-' }}</view>
            <view class="table-col-c" style="width: 26%">
              <input v-model="item2.detailTotal" placeholder="请填写" type="number"
                     placeholder-class="placeholder" disabled/>
            </view>
            <view class="table-col-c" style="width: 18%">
              <input v-model="item2.margin" placeholder="请填写" type="number"
                     placeholder-class="placeholder" disabled/>
            </view>
            <view class="table-col-c" style="width: 18%">
              <u-icon name="arrow-right" color="#999" size="16" class="ml"></u-icon>
            </view>
          </view>
        </view>

      </template>

    </view>

    <u-popup v-model="showHouseEditPop" mode="bottom" length="70%" closeable>
      <view class="pop-box" v-if="selectHouse">
        <view class="pop-box-top">
          <view class="pop-box-tit">房源信息</view>
        </view>

        <view class="show-panel" style="margin-top: 120rpx">
          <view class="show-col">
            <text class="show-col-l">房源编号</text>
            <view class="show-col-r">
              {{selectHouse.roomCode}}
            </view>
          </view>

        </view>

        <view class="show-panel">
          <view class="show-col">
            <text class="show-col-l">租金(元)</text>
            <view class="show-col-r">
              <input v-model="selectHouse.rental" placeholder="请填写金额" type="number"
                     placeholder-class="placeholder"/>
            </view>
          </view>

          <view class="show-col">
            <text class="show-col-l">物业费 (元)</text>
            <view class="show-col-r">
              <input v-model="selectHouse.facilityNoun" placeholder="请填写金额" type="number"
                     placeholder-class="placeholder"/>
            </view>
          </view>

          <view class="show-col">
            <text class="show-col-l">水电气费用 (元)</text>
            <view class="show-col-r">
              <input v-model="selectHouse.electricFee" placeholder="请填写金额" type="number"
                     placeholder-class="placeholder"/>
            </view>
          </view>

          <view class="show-col">
            <text class="show-col-l">设施赔偿费 (元)</text>
            <view class="show-col-r">
              <input v-model="selectHouse.property" placeholder="请填写金额" type="number"
                     placeholder-class="placeholder"/>
            </view>
          </view>
        </view>

        <view class="show-panel">
          <view class="show-col">
            <text class="show-col-l">保证金 (元)</text>
            <view class="show-col-r">
              <input v-model="selectHouse.margin" placeholder="请填写金额" type="number"
                     placeholder-class="placeholder"/>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: "refundInfo",
  data() {
    return {
      refundInfo: null,
      selectHouse:null,
      showHouseEditPop:false
    }
  },
  onLoad({id}){
    console.log("id",id)
    this.apis.lifeApi.getRefundHistoryById(id).then(res=>{
      console.log(res)
      this.refundInfo=res.data
    })
  },
  methods:{
    showHouseEditFn(item){
      this.selectHouse=item
      this.showHouseEditPop=true
    }
  }
}
</script>

<style scoped lang="scss">
.pop-box {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f8f8f8;
  display: flex;
  flex-direction: column;

  .pop-box-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 2;

    .pop-box-tit {
      width: 100%;
      height: 100rpx;
      background: #fff;
      @include flexCenter;
    }
  }

  .pop-box-c {
    width: 100%;
    flex: 1;
    padding-top: 124rpx;

    .leasepop-scroll {
      width: 100%;
      height: 100%;
      background: #f8f8f8;
      padding-bottom: 160rpx;
    }
  }

}
</style>
